import * as React from "react"
import { observer } from "mobx-react"
import { ViewStyle, Text, View, TextStyle, TouchableWithoutFeedback } from "react-native"
import { Screen } from "../../components/screen"
import { color } from "../../theme"
import { NavigationScreenProps } from "react-navigation"
import { ElementsIcon as Icon } from "../../components"
import { px2dp } from "../../utils"

export interface UserInfoScreenProps extends NavigationScreenProps<{}> {}

export interface UserInfoItemProps {
  title: string
  hideRightArrow?: boolean
  style?: object
  onPress?: () => void
}

const styledUserInfoItem: ViewStyle = {
  flexDirection: "row",
  height: px2dp(50),
  alignItems: "center",
  borderBottomWidth: px2dp(1),
  borderColor: "#f3f4f6",
  borderStyle: "solid",
  backgroundColor: "#fff"
}

const styledItemTitle: TextStyle = {
  flex: 1,
  paddingLeft: px2dp(16),
  color: "#6d788e",
  fontSize: px2dp(14)
}

const styledItemValue: ViewStyle = {
  flex: 2,
  flexDirection: "row",
  paddingRight: px2dp(16),
  alignItems: "center",
  justifyContent: "flex-end"
}

const styledValueText: TextStyle = {
  marginRight: px2dp(14),
  color: "#1a1c2a",
  fontSize: px2dp(14)
}

function UserInfoItem(props: UserInfoItemProps) {
  return (
    <TouchableWithoutFeedback onPress={props.onPress}>
      <View style={[styledUserInfoItem, props.style]}>
        <Text style={styledItemTitle}>{props.title}</Text>
        <View style={styledItemValue}>
          <Text style={styledValueText}>xxxx</Text>
          {props.hideRightArrow ? null : <Icon color="#ccc" name="play-arrow" size={12} />}
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
}

// @inject("mobxstuff")
@observer
export default class UserInfoScreen extends React.Component<UserInfoScreenProps, {}> {
  render() {
    return (
      <Screen style={{ backgroundColor: color.palette.lighterGrey }}>
        <UserInfoItem hideRightArrow title={"账号"} />
        <UserInfoItem hideRightArrow title={"注册日期"} />
        <UserInfoItem title={"头像"} style={{ marginTop: px2dp(10) }} />
        <UserInfoItem
          title={"昵称"}
          onPress={() => this.props.navigation.navigate("EditUsername")}
        />
        <UserInfoItem title={"生日"} />
        <UserInfoItem title={"性别"} onPress={() => this.props.navigation.navigate("EditSex")} />
        <UserInfoItem title={"联系方式"} />
        <UserInfoItem title={"我的代理"} />
      </Screen>
    )
  }
}
